<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>

<body>

    <div id="loading">Loading...</div>
    <button id="button">Play</button>
    <div id="player"></div>
    <script src="https://cdn.jsdelivr.net/npm/@webtor/embed-sdk-js/dist/index.min.js" charset="utf-8" async></script>
    <script>
        var button = document.getElementById('button');
        var player = document.getElementById('player');
        var loading = document.getElementById('loading');
        player.style.display = 'none';
        loading.style.display = 'none';

        button.addEventListener('click', function () {
            button.style.display = 'none';
            loading.style.display = 'block';
            initPlayer();
        });

        function initPlayer() {
            window.webtor = window.webtor || [];
            window.webtor.push({
                id: 'player',
                width: '100%',
                magnet: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel',
                on: function (e) {
                    if (e.name == window.webtor.INITED) {
                        e.player.play();
                        player.style.display = 'block';
                        loading.style.display = 'none';
                    }
                },
            });
        }


    </script>
</body>
</html>
